<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/comment.css"/><!--图标-->
    <title>全部评论</title>
    <style>
        body {
            background-color: #F7F7F7;
        }

        .comment-list-head {
            height: 0.6rem;
            width: 0.6rem;
        }

        .comment-list-head img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .comment-list-user {
            color: #222222;
        }

        .comment-list-del-wrap {
            height: 0.3rem;
        }

        .comment-list-del {
            height: 0.06rem;
            width: 0.06rem;
            background-color: #999999;
            margin-left: 0.06rem;
            border-radius: 1rem;
        }

        .comment-list-content {
            color: #222222;
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.42rem;
            max-width:6rem;
            word-break: break-all;
        }

        .comment-list-reply-wrap {
            padding: 0.22rem 0.24rem;
            background-color: #F5F5F5;
        }

        .comment-list-reply-user {
            color: rgba(34, 34, 34, 0.7);
        }

        .comment-list-reply-content {
            color: #222222;
            line-height: 0.4rem;
            word-break: break-all;
        }

        .comment-list-reply-more {
            color: #2C68FF;
        }

        .comment-list-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-list-reply-icon {
            margin-left: 0.76rem;
        }

        .comment-list-input-wrap {
            height: 1.5rem;
            width: 7.5rem;
            background-color: white;
            position: fixed;
            bottom: 0;
        }

        .comment-list-input {
            margin: 0.18rem 0.32rem;
            border-radius: 0.08rem;
            background-color: #F6F6F6;
            height: 0.64rem;
            line-height: 0.64rem;
            padding-left: 0.28rem;
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-list-wrap {
            padding: 0.32rem 0.4rem 0 0.4rem;
        }

        .comment-list-no {
            width: 7.5rem;
            margin-top: 3rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .comment-list-no img {
            width: 5.2rem;
            height: 1.76rem;
        }

    </style>
</head>
<body>

<div class="comment-list flex-column ff400 fs14 h-100-p" style="background: white;">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">全部评论</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-column  flex-1 scoll-y scoll-area" style="background-color: #F7F7F7">
        <div class="comment-list-wrap" style="background-color: #FFFFFF">


        </div>
        <div class="comment-list-no flex-column align-items-center" style="display: none;">
            <img src="../../images/no-comment.png">
            <div>暂无评论，快来抢沙发吧</div>
        </div>
        <!--<div class="more" style="display: none"></div>-->
    </div>

    <div class="comment-area">
    </div>
    <div class="comment-del-area">

    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script>
  let pm = {
    pageNum: 1,  //当前页
    pageSize: 10,
    isScroll: false,
    firstLevelId: '',
    parentId: '',
    infoType: 2,
    datasource: '2', // 默认安卓
    infoId: '',
    defaultImg: '../../images/user/user-comment.png',
    userId: '',
    firstIn: true,
    isLogin: false
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest
    pm.infoId = params.infoId
    pm.infoType = params.infoType
    getComments()
    Template.pageScrollDiv(getComments)
    $('.comment-area').html(Template.commentDetail(1, 1, 1, 1))

  }

  function reLoadPage() {
    $('.comment-list-wrap').html('')
    $('.comment-list-no').hide()
    pm.pageNum = 1
    pm.isScroll = false
    pm.firstLevelId = ''
    pm.parentId = ''
    pm.userId = ''
    pm.firstIn = true
    pm.isLogin = !user.isGuest
    getComments()
    Template.pageScrollDiv(getComments)
    $('.comment-area').html(Template.commentDetail(1, 1, 1, 1))
  }

  function getComments() {
    Server.commentList.getComments({
      objectSource: pm.infoType,
      commentObjectId: pm.infoId,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      pm.userId = data.id
      let htmlStr = ''
      if (pm.firstIn) {
        if (data.list && data.list.length > 0) {
          $('.more').show()
        } else {
          $('.comment-list-no').show()
        }
        pm.firstIn = false
      }
      data.list.forEach(function (item) {
        htmlStr += '<div class=\'comment-list-item flex-row pb30\'>'
        htmlStr += '<div class=\'comment-list-head mr10\'><img src=' + (item.headUrl ? item.headUrl : pm.defaultImg) + ' /></div>'
        htmlStr += '<div class=\'flex-column flex-1\'>'
        htmlStr += '<div class=\'flex-row justify-content-between align-items-center\'>'
        htmlStr += '<div class=\'comment-list-user fs13 ff600\'>' + Utils.dealUndefined(item.userName) + '</div>'
        let jsonStr = {
          commentId: item.commentId,
          userName: item.userName,
          isLike: item.isLike
        }
        if (pm.userId === item.userId) {
          htmlStr += '<div class=\'flex-row comment-list-del-wrap \' onclick=\'Template.commentDel(' + JSON.stringify(jsonStr) + ')\' >'
          htmlStr += '<div class=\'comment-list-del\'></div>'
          htmlStr += '<div class=\'comment-list-del\'></div>'
          htmlStr += '<div class=\'comment-list-del\'></div>'
          htmlStr += '</div>'
        }
        htmlStr += '</div>'
        htmlStr += '<div class=\'comment-list-content fs15\'>' + item.content + '</div>'
        // 评论回复
        if (item.commentTotal > 0) {
          htmlStr += '<div class=\'comment-list-reply-wrap mb10 flex-column\'>'
          item.commentList.forEach(function (it) {
            htmlStr += '<div class=\'flex-row mb10\'>'
            htmlStr += '<div class=\'fs13\' style="max-width: 5.5rem;">'
            htmlStr += '<span class=\'comment-list-reply-user\'>' + Utils.dealUndefined(it.userName) + '：</span>'
            htmlStr += '<span class=\'comment-list-reply-content\'>' + Utils.dealUndefined(it.content) + '</span>'
            htmlStr += '</div>'
            htmlStr += '</div>'
          })

          if (item.commentTotal > 2) {
            htmlStr += ' <div class=\'comment-list-reply-more fs13\' onclick=\'goMoreComment(' + JSON.stringify(item) + ')\'>查看更多回复</div>'
          }
          htmlStr += '</div>'
        }

        // 评论时间及回复点赞
        htmlStr += '<div class=\'flex-row justify-content-between align-items-center fs12\'>'
        htmlStr += '<div class=\'comment-list-time\'>' + DateUtils.int2TimeDesc(item.createDttm) + '</div>'
        htmlStr += '<div class=\'flex-row align-items-center\'>'
        htmlStr += '<span class=\'iconfont icondianzan fs16 ' + (item.isLike ? 'comment-thumbsup-c' : '') + '\' isLike=\'' + Utils.dealUndefined(item.isLike) + '\'  onclick=\'fabulous(' + JSON.stringify(jsonStr) + ',this)\'></span>'
        htmlStr += ' <span class=\' ' + (item.thumbsupCnt ? 'ml5' : '') + ' \'>' + Utils.dealUndefined(item.thumbsupCnt) + '</span>'
        if (pm.userId !== item.userId) {// 评论人不能评论自己的评论
          htmlStr += ' <span class=\'comment-list-reply-icon iconfont iconpinglun fs16\' onclick=\'writeComment(' + JSON.stringify(jsonStr) + ')\'></span>'
        }
        htmlStr += ' </div>'
        htmlStr += '</div>'

        htmlStr += '</div>'
        htmlStr += '</div>'
      })

      if (data.list && data.list.length >= pm.pageSize) {
        pm.isScroll = true
      } else {
        $('.more').html('暂无更多数据')
        pm.isScroll = false
      }
      $('.comment-list-wrap').append(htmlStr)

    })
  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论
      if (Utils.emojiJudge($('.comment-list .comment-content').val())){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      }else if ($('.comment-list .comment-content').val() && $('.comment-list .comment-content').val().trim()) {//如果有内容，则添加评论
        addCommentInfo()
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }

  // 添加评论
  function addCommentInfo() {
    Server.commentList.addCommentInfo({
      commentObjectId: pm.infoId,
      objectSource: pm.infoType,
      datasource: pm.datasource, // 默认安卓
      parentId: pm.parentId ? pm.parentId : null,
      firstLevelId: pm.firstLevelId,
      content: $('.comment-list .comment-content').val(),
    }).then(function (data) {
      if (data.code === 0) {
        //  jsBridge.callBridge('toast', { msg: '评论成功' })
        $('.comment-list .comment-content').val('')
        // 跳转到评论列表
        $('.comment-list-wrap').html('')
        $('body').animate({scrollTop: 0}, 500)
        pm.pageNum = 1
        $('.more').hide()
        $('.comment-list-no').hide()
        pm.firstIn = true
        getComments()

      } else {
        jsBridge.callBridge('toast', {msg: '评论失败'})
      }
    })
  }

  //点赞
  function fabulous(item, o) {
    if (pm.isLogin) {
      let thumb = $(o).siblings(':first').text()
      if ($(o).attr('isLike') === '1') {
        item.isLike = '0'
        $(o).removeClass('comment-thumbsup-c')
        $(o).siblings(':first').text((parseInt(thumb) - 1) ? (parseInt(thumb) - 1) : '')
      } else {
        item.isLike = '1'
        $(o).addClass('comment-thumbsup-c')
        $(o).siblings('span').addClass('ml5')
        $(o).siblings(':first').text((parseInt((Utils.notEmpty(thumb) ? thumb : 0)) + 1))
      }
      $(o).attr('isLike', item.isLike)
      Server.commentList.fabulous({
        thumbupObjectId: item.commentId,
        objectSource: pm.infoType,
        datasource: pm.datasource,
        status: item.isLike
      }).then(function (data) {
        if (data.code === 0) {
          jsBridge.callBridge('toast', {msg: item.isLike === '1' ? '点赞成功' : '取消成功'})
        } else {
          jsBridge.callBridge('toast', {msg: '点赞失败'})
        }
      })
    } else {
      Utils.goLogin()
    }
  }

  //评论与评论回复
  function writeComment(item) {
    if (pm.isLogin) {
      if (item) {
        pm.parentId = item.commentId
        pm.firstLevelId = item.commentId
        $('.comment-list .comment-content').attr('placeholder', '回复' + item.userName)
      } else {
        pm.parentId = ''
        pm.firstLevelId = ''
        $('.comment-list .comment-content').attr('placeholder', '发表你的看法')
      }
      $('.comment-list .comment-show').show()
      $('.comment-content').focus()
    } else {
      Utils.goLogin()
    }
  }

  // 跳转到更多评论
  function goMoreComment(item) {
    jsBridge.openWindow('html/comment/comment-more.html?infoId=' + item.commentObjectId + '&infoType=' + pm.infoType + '&commentId=' + item.commentId, {}, {noBar: false})
  }

  //评论删除
  function delComment(item) {
    if (pm.isLogin) {
      Server.commentList.delComment({
        commentObjectId: pm.infoId,
        commentId: item.commentId
      }).then(function (data) {
        if (data.code === 0) {
          cancleDel()
          jsBridge.callBridge('toast', {msg: '删除成功'})
          $('.comment-list-wrap').html('')
          $('body').animate({scrollTop: 0}, 500)
          pm.pageNum = 1
          pm.firstIn = true
          $('.more').hide()
          $('.comment-list-no').hide()
          getComments()
        } else {
          jsBridge.callBridge('toast', {msg: '删除失败'})
        }
      })
    } else {
      Utils.goLogin()
    }

  }


</script>
</html>
